﻿<!DOCTYPE >

<html >
<head>
    <title>导航控件</title>
   
    <script src="../../lib/XiaoFuMap.js" type="text/javascript"></script>
     
    <script type="text/javascript">

        var map;
        var control = null;
        function load() {
            map = new XiaoFu.Map("#MapContainer");
            var layer = new XiaoFu.GoogleCacheLayer(GoogleUrl.Map);
            map.addLayer(layer); 
            control = new XiaoFu.Navigation();
            map.addControl(control);
            draw();
        }
        function showToolBox() {
            $("#ToolContainer").show();
            //$("#ToolImg").hide();
            //toolImgStart();
        }
        function hideToolBox() {
            $("#ToolContainer").hide();
            //$("#ToolImg").show();
           // toolImgBack();
        }
        var img, ctx;
        function draw() {           
            img = new Image();
            img.src = "../image/toolbox2.png";            
            img.onload = function () {
                var c = document.getElementById("ToolImg");
                ctx = c.getContext("2d");
                ctx.drawImage(img, 0, 0, 30, 30);
                var c2 = document.getElementById("ToolImg2");
                ctx2 = c2.getContext("2d");
                ctx2.drawImage(img, -15, 0, 30, 30);
            }
        }
        var angle = 0;
        function toolImgStart() {
            if (angle > -90) {
                angle--;
                //ctx.clearRect(0,0,300,300);
                ctx.rotate(XiaoFu.Utils.getAngleRadians(angle));
                ctx.drawImage(img, 30 * Math.sin(XiaoFu.Utils.getAngleRadians(angle)), -30 * Math.cos(XiaoFu.Utils.getAngleRadians(angle)), 30, 30);
                
                ctx.restore();
                setTimeout(toolImgStart,1000);
            }
        
        };
        function toolImgBack() {
            //return;
            if (angle < 0) {
                angle++;
                ctx.clearRect(-30, 0, 300, 300);
                ctx.rotate(XiaoFu.Utils.getAngleRadians(90));
                //ctx.translate(15, 15);
                ctx.drawImage(img, 0, 0, 30, 30);
                ctx.restore();
               // toolImgBack();
            }
        };
    </script>
</head>
<body onload="load();">
    <div id="MapContainer" style="z-index: 10000; border: 1px solid blue; position: relative; 
        width: 1000px; height: 500px;">
        <div id="ToolBoxControl" onmouseover="showToolBox()" onmouseout="hideToolBox();" style="border-radius: 30px 30px; 
            background-color:#C1D5EB; position:absolute; right:30px; top:30px; z-index:5001; "    >
            <div style="border-radius: 30px 30px; padding:5px; float:left;  
            background-color:#C1D5EB; border:2px solid white;">
                <canvas id="ToolImg" width="30px" height="30px" style="padding:0px 0px 0px 0px; "></canvas>
            </div>
            
            <div id="ToolContainer" style=" display:none; float:left; padding:7px 3px 0px 3px;">
                <img alt="" src="../image/measure.png"  width="30px" height="30px" style=" cursor:pointer; padding:0px 3px 0px 3px;"/>
                <img alt="" src="../image/email.png"  width="30px" height="30px" style="cursor:pointer; padding:0px 3px 0px 3px;"/>
                <img alt="" src="../image/world.png"  width="30px" height="30px" style="cursor:pointer; padding:0px 3px 0px 3px;"/>
                <img alt="" src="../image/satellite.png"  width="30px" height="30px" style="cursor:pointer; padding:0px 3px 0px 3px;"/>
                
            </div>
           <!-- <canvas id="ToolImg2" width="15px" height="30px" style="float:left; padding:1px 0px 0px 0px; "></canvas>
        -->
                <!--<img alt="" id="ToolImg" src="../image/toolbox.png" width="30px" height="30px" style="padding:1px 0px 0px 0px;"   />
        -->
        </div>
    </div>  
    <div id="msg">
    </div>
        

</body>
</html>
